<template>
  <div class="home-page">
    <div class="commodity">
      <!-- <div class="country">
        <van-image class="country-img" :src="require('../assets/image/dingwei.png')"></van-image>
        <div class="country-content">{{中国}}</div>
      </div> -->
      <van-image class="commodity-img" :src="require('../assets/image/head-bg-img.png')"></van-image>
    </div>
    <van-button size="large" class="banner-btn" >{{$i18n.t('default.home.retailZone')}}</van-button>
    
    <div class="product-list">
      <div class="boxs">
        <!-- 零售 商品列表 -->
        <div class="box" v-for="(item,index) in goodsList2" :key="index" @click="gotoProductDetail(item)">
          <van-image class="product-img" fit="cover" :src="item.goodsImages?$store.state.imageHost+item.goodsImages[0].url:notImage" alt=""></van-image>
          <div class="right">
            <div>
              <div class="box-top">
                <div class="price">
                  ${{item.goodsPrice}}
                </div>
                <!-- <div class="star-imgs">
                  <van-image class="star-img" v-for="i in 5" :key="i" width="16" height="16" :src="require('../assets/image/els/star.png')"></van-image>
                </div> -->
              </div>
              <div class="title">{{item.goodsName}}</div>
            </div>
            <div class="btn">
              <van-button class="gradient">{{$i18n.t('default.home.buyNow')}}</van-button>
            </div>
          </div>
        </div>
        <!-- 商品列表 --> 
      </div>
      <van-button size="large" class="banner-btn2" >{{$i18n.t('default.home.upgradeZone')}}</van-button>
      <div class="boxs">
        <!-- 商品列表 -->
        <div class="box" v-for="(item,index) in goodsList" :key="index" @click="gotoProductDetail(item)">
          <van-image class="product-img" fit="cover" :src="item.goodsImages?$store.state.imageHost+item.goodsImages[0].url:notImage" alt=""></van-image>
          <div class="right">
            <div>
              <div class="box-top">
                <div class="price">
                  ${{item.goodsPrice}}
                </div>
                <div class="star-imgs" v-if="item.goodsType == 3">
                  <van-image class="star-img" v-for="i in item.levelNum" :key="i" width="16" height="16" :src="require('../assets/image/els/star.png')"></van-image>
                </div>
              </div>
              <div class="title">{{item.goodsName}}</div>
            </div>
            <div class="btn">
              <van-button class="gradient">{{$i18n.t('default.home.buyNow')}}</van-button>
            </div>
          </div>
        </div>
        <!-- 商品列表 --> 
      </div>
      <v-navBar></v-navBar>
    </div>
  </div>
  
</template>
<script>

export default {
  data() {
    return {
      goodsList:[{ //其它类型商品
        goodsID:'',
        goodsName:'',
        goodsPrice:'',
        goodsImage:'',
        goodsImages:[{url:''}]
      }],
      goodsList2:[{ //零售商品
        goodsID:'',
        goodsName:'',
        goodsPrice:'',
        goodsImage:'',
        goodsImages:[{url:''}]
      }],
      notImage: require('../assets/image/notImg.png'),
      imageUrl: '',
      
    }
  },

  created() {
    this.$store.commit('setNavBarNum',0); 
    console.log('this.$store.state.token',this.$store.state.token)
    this.getUser();
    this.init2();
  },
  methods: {
    gotoProductDetail(item){
      if(item.disable == 1){
        this.$toast(this.$i18n.t('default.home.soldOut'));
        return;
      }
      this.$store.commit('setGoodsID',item.goodsID);
      this.$router.push({path: '/productDetail',query:{goodsID:item.goodsID,goodsItem:JSON.stringify(item)}})
    },
    init(){
      this.goodsList2 = [];
      this.goodsList = [];
      this.$api.get(this.$url.goods.list).then(res=>{
          if(res.code == 'SUCCESS'){
            for(let i in res.data){
              let arr = [];
                res.data[i].goodsImages = res.data[i].goodsImages.split(',');
                for(let j in res.data[i].goodsImages){
                  if(res.data[i].goodsImages[j]){
                      arr.push(JSON.parse(res.data[i].goodsImages[j]));
                    }
                  }
                  console.log('arr:',arr)
                  res.data[i].goodsImages = arr[0];
                  console.log('res.data[i].goodsImages:',res.data[i].goodsImages)
                  if(res.data[i].goodsType == 2){
                    if(res.data[i].disable != 1){
                      this.goodsList2.push(res.data[i]);
                    }
                  }else{
                    if(res.data[i].disable != 1){
                      this.goodsList.push(res.data[i]);
                    }
                  }
            }
              console.log('this.goodsList',this.goodsList[0])
              console.log('this.goodsList2',this.goodsList2[0])
          }
      })
    },
    init2(){
      // this.$api.get(this.$url.system.homepage).then(res=>{
      //     if(res.code == 'SUCCESS'){
      //         this.imageUrl = res.data;
      //     }
      // })
    },
    getUser(){
        this.$api.get(this.$url.user.info).then(res=>{
          if(res.code == 'SUCCESS'){
              this.userForm = res.data;
              this.$store.commit('setUserInfo',res.data);
              if(this.userForm.updatePwd == 0){
                this.$router.push('/forget');
              }
              this.init();
          }else{
            this.init();
          }
          
      })
    }
  }
}

</script>

<style scoped lang="scss">
.home-page{
  background: url('../assets/image/els/bg1.png') no-repeat;
  min-height: 100vh;
  padding: .3rem;
}
.commodity{
  position:relative;
  
  .country{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: .31rem;
    left: 0.5rem;
    width: 1.28rem;
    height: .52rem;
    color: #fff;
    border-radius: .26rem;
    z-index: 1;
    background: #000;
    opacity: .5;
    .country-img{
      width: .23rem;
      height: .33rem;
      margin-right: .1rem;
    }
  }
  .commodity-img{
    width: 100%;
    height: 3.8rem;
  }
}
.banner-btn{
    background: #755936;
    border: 1px solid #755936;
    color: #fff;
    border-radius: .1rem;
    margin: .3rem 0;
}
.banner-btn2{
  background: #B18A4B;
  border: 1px solid #B18A4B;
  color: #fff;
  border-radius: .1rem;
  margin: .3rem 0;
}
.product-list{
  padding: 0;
  .boxs{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .box{
      display: flex;
      width: 100%;
      height: 2.8rem;
      background: #fff;
      border-radius: .1rem;
      padding: .2rem;
      margin-bottom: .4rem;
      box-sizing: border-box;
      .right{
        flex: 1;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .box-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .star-imgs{
         display: flex;
      }
      .star-img{
        margin-left: .05rem;
      }
      .product-img{
        width: 2.2rem;
        height: 2.4rem;
        border-radius: .1rem;
        margin-right: .2rem;
      }
      .price{
        // color: #FF005A;
        font-size: .4rem;
      }
      .title{
        margin-top: .1rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        
      }
      .btn{
        display: flex;
        justify-content: right;
        .gradient{
          // width: 1.8rem;
          height: .68rem;
          color: #fff;
          background: linear-gradient(267deg, #A48652, #F2CB51, #5F4532);
          border: none; 
          border-radius: .34rem;
        }
      }
    }
  }
}

</style>
<style>
.home-page .commodity-img img{
  border-radius: .1rem;
}
</style>

